<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="author" content="">
  <title></title>
  <style>
    body{
      margin: 0;
    }
    li{
    list-style: none;
    color: inherit;
    font-size: inherit;
}
    .box{
      width: 300px;
      height: 400px;
      background-color: rgb(255, 255, 255);
      position: absolute;
      top: calc(50% - 200px);
      left: calc(50% - 150px);
      display: none;
    }
    .img1{
      width: 150px;
      height: 75px;
    }
    .img2{
      width: 138px;
      height: 138px;
      margin-left: 10px;
    }
    .cancel{
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 35px;
      cursor: pointer;
    }
    .head{
      height: 60px;
      background-color: #fff;
      border-bottom: 1px solid rgb(99, 99, 99);
    }
    .mask{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color:rgba(0, 0, 0,0.5);
      display: none;
      /* z-index: -1; */
    }
    span{
      position: relative;
      bottom: 12px;
    }
    button{
      width: 50px;
      height: 30px;
    }
    /* p{
      font-size: 80px;
      color: rgb(236, 155, 155);
    } */
    a,p,span{
    color: inherit;
    font-size: inherit; 
    text-decoration: none;
}
    .logo {
    background: url('https://passport.baidu.com/passApi/img/loginlogo.png') no-repeat left;
    font-size: 16px;
    height: 32px;
    line-height: 46px;
    padding-left: 118px;
    color: #000;
    margin-top: 1px;
    margin-bottom: 15px;
    margin-left: 35px;
}
.content{
    padding-top: 24px;
    height: 180px;
    overflow: hidden;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
}
.content>img{
    width: 138px;
    height: 138px;
}
.content p{
    background: url('https://passport.baidu.com/passApi/img/qrcodeLoginGuide.png') no-repeat center;
    height: 138px;
    width: 125px;
}
.appLogin{
    font-size: 16px;
    text-align: center;
    line-height: 16px;
    padding-left: 0;
}
.appLogin a{
    color: #2e82ff;
}
ul{
    padding-top: 16px;
    margin-left: 40px;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
}
ul li:nth-child(1) i{
    width: 12px;
    height: 18px;
    display: inline-block;
    position: relative;
    top: 6px;
    margin-right: 8px;
    background: url('https://passport.baidu.com/passApi/img/loginv4.png') no-repeat;
    background-position-x: -9px;
    background-position-y: -3px;
}
ul li:nth-child(2) i{
    width: 12px;
    height: 18px;
    display: inline-block;
    position: relative;
    top: 6px;
    overflow: hidden;
    margin-right: 8px;
    background: url('https://passport.baidu.com/passApi/img/loginv4.png') no-repeat;
    background-position-x: -31px;
    background-position-y: -3px;
}
ul li:nth-child(3) i{
    width: 14px;
    height: 18px;
    display: inline-block;
    position: relative;
    top: 6px;
    margin-right: 8px;
    background: url('https://passport.baidu.com/passApi/img/loginv4.png') no-repeat;
    background-position-x: -50px;
    background-position-y: -3px;
}
.footer{
    color: #2e82ff;
    margin-top: -16px;
    height: 60px;
    line-height: 60px;
    background: #f0f6ff;
    padding: 0 28px;
    position: relative;
    font-size: 14px;
}
.footer .left{
    float: left;
}
.left span:nth-child(2){
    display: inline-block;
    width: 1px;
    height: 8px;
    background-color: #2e82ff;
    margin: 0 15px;
}
.footer>a{
    float: right;
}
.icon a:nth-child(1){
    display: inline-block;
    width: 24px;
    height: 24px;
    color: #00C;
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
    list-style: none;
    background: url('https://passport.baidu.com/passApi/img/loginv4.png') no-repeat;
    background-position-x: -4px;
    background-position-y: -29px;
    position: relative;
    top: 7px;
}
.icon a:nth-child(2){
    display: inline-block;
    width: 24px;
    height: 24px;
    color: #00C;
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
    list-style: none;
    background: url('https://passport.baidu.com/passApi/img/loginv4.png') no-repeat;
    background-position-x: -55px;
    background-position-y: -29px;
    position: relative;
    top: 6px;
}
  </style>
</head>
<body>
  <button class="btn">弹窗</button>
  <div class="mask"> 
    <div class="box">
      <div class="head">
        <span class="cancel">x</span>
      </div>
      <p class="logo">扫码登录</p>
      <div class="content">
          <img src="https://passport.baidu.com/v2/api/qrcode?sign=v1_70f95a20e360a068a2b914bffb681&lp=pc&qrloginfrom=pc"
              alt="">
          </img>
          <p></p>
      </div>
      <p class="appLogin">请使用<a href="javascript:;">百度APP</a>扫码登录</p>
      <ul>
          <li><span><i></i>安全</span></li>
          <li><span><i></i>高效</span></li>
          <li><span><i></i>便捷</span></li>
      </ul>

      <div class="footer clearfix">
          <div class="left">
              <a href="javascript:;">用户名登录</a>
              <span></span>
              <span class="icon">
                  <a href="javascript:;"></a>
                  <a href="javascript:;"></a>
              </span>
          </div>
          <a href="javascript:;">立即注册</a>
    </div> 
</div>
 
 <p>遮罩层</p>
<script>
  var box = document.querySelector('.box');
  var btn = document.querySelector('.btn');
  var mask = document.querySelector('.mask');
  var can = document.querySelector('.cancel');

  // 鼠标移动事件
  box.onmousedown = function(e){
  // 获取滚动的距离
  var scrollLeft = document.scrollingElement.scrollLeft;//x轴滚动的距离
  var scrollTop = document.scrollingElement.scrollTop;//y轴滚动的距离
  // 可视页面的尺寸
  var clientWidth = document.documentElement.clientWidth;//可视页面的宽
  var clientHeight = document.documentElement.clientHeight;//可视页面的高
  // loginBox自身的尺寸
  var width = box.offsetWidth;
  var height = box.offsetHeight;
  // 整个页面的大小
  // var scrollWidth = document.documentElement.scrollWidth;
  // var scrollHeight = document.documentElement.scrollHeight;
  // console.log(scrollTop,clientHeight,scrollHeight);

  // 按下鼠标，鼠标相对于loginBox的偏移量
  var offsetX = e.offsetX;
  var offsetY = e.offsetY;
  document.onmousemove = function(ev){
    // 鼠标位置：ev.pageY = ev.clientY + scrollTop
    var left = ev.pageX - offsetX;
    var top = ev.pageY - offsetY;

    // x轴
    var minX = 0+scrollLeft;//左边
    var maxX = clientWidth-width + scrollLeft;//右边: 

    left = left<=minX ? minX : left;
    left = left>=maxX ? maxX : left;
    
    // y轴
    var minY = 0+scrollTop;//顶部:页面不滚动，最小值是scrollTop=0；当页面滚动的时候，最小值页面滚动的距离 scrollTop
    var maxY = clientHeight-height + scrollTop;//底部: 让maxY跟着scrollTop的值一点一点的变大

    top = top<=minY ? minY : top;
    top = top>=maxY ? maxY : top;

    console.log(top);

    box.style.left = left + 'px';
    box.style.top = top + 'px';
  }
}

// 鼠标松开移动取消
document.onmouseup = function(){
  document.onmousemove = null;
}

  btn.onclick = function(){
    box.style.display = 'block';
    mask.style.display = 'block';
     // 隐藏滚动条
  document.documentElement.style.overflow = 'hidden';
  // document.body.style.overflow = 'hidden';

  reset();
  }
  
  can.onclick = function(){
    box.style.display = 'none';
    mask.style.display = 'none';
    
  }

  function reset(){
    // 可视页面的尺寸
    var clientWidth = document.documentElement.clientWidth;//可视页面的宽
    var clientHeight = document.documentElement.clientHeight;//可视页面的高
    // 获取滚动的距离
    var scrollLeft = document.scrollingElement.scrollLeft;//x轴滚动的距离
    var scrollTop = document.scrollingElement.scrollTop;//y轴滚动的距离
    console.log(scrollTop);
  
    // 1、设置overlay的尺寸
    // 方式1：让overlay的尺寸随着滚动距离一点一点的变化
    mask.style.width = clientWidth+scrollLeft + 'px';
    mask.style.height = clientHeight+scrollTop + 'px';
  
    // console.log(document.documentElement.scrollHeight);
    // 尺寸关系：当页面的滚动距离最大的时候，overlay的大小和整个页面的大小是一样的：overlay.style.height = clientHeight+scrollTop
    // scrollHeight >= clientHeight+scrollTop: 当页面的滚动距离最大的时候，前后相等
    // 方式2：直接让overlay的尺寸已到位，直接等于整个页面的大小
    // mask.style.width = document.documentElement.scrollWidth + 'px';
    // mask.style.height = document.documentElement.scrollHeight + 'px';
  
    // 2、设置loginBox的位置
    box.style.left = clientWidth/2 - box.offsetWidth/2 + scrollLeft +'px';
    box.style.top = clientHeight/2 - box.offsetHeight/2 + scrollTop +'px';
}

window.onscroll = function(){
  reset();
}
window.onresize = function(){
  reset();
}
  
</script>
</body>
</html>